<template>
	<view>
		<view class="rohead">
			<view class="creta">
				创建Xdidi账户
			</view>
			<view class="logins" @click="gogin">
				登录
			</view>
		</view>

		<view class="seins">
			<view class="centwe">
				<view class="urtems">
					<view class="shud">
						手机/邮箱
					</view>
					<view class="conste seleacou">

						<view class="xijsd"  v-if="isatinpu "   :class="inputTelClass">

							<view class="sechs"   @click="opencury">
								<image class="cury" src="/static/dazi/china.png" mode=""></image>
								<view class="senum">
									+86
								</view>
								<image class="botm" src="/static/dazi/Polygon 2.png" mode="widthFix"></image>
							</view>
							<view class="incenm">
							<input 	type="email" focus border="surround" placeholder="请输入" 
									v-model="email" @input="debouncedOnEmailInput" placeholderClass='uins'
									@focus="handletelFocus" @blur="handletelBlur" />
								<!-- <input type="text" placeholder="输入手机号或者邮箱." v-model="account" placeholder-class="co" /> -->
							</view>
							<image class="siecle" src="/static/dazi/cle.png" mode=""
								@click="account =''"></image>
						</view>


<!-- 邮箱的 -->
						<view class="conjis" v-else >
							<view class="xijsd">
								<view class="incenm">
									<input type="text" placeholder="输入手机号或者邮箱.."  focus border="surround" clearable
								v-model="email" placeholderClass='uins' @input="debouncedOnEmailInput"
								@focus="handletelFocus" @blur="handletelBlur"
										placeholder-class="co" />
								</view>
								<image  class="botm" src="/static/dazi/cle.png" mode=""
									@click="account =''"></image>


							</view>
					
							
							<!-- 显示联想的邮箱后缀 -->
							<view v-if="showSuggestions && suggestions.length > 0" class="suggestions">
								<view v-for="(domain, index) in suggestions" :key="index" @click="selectDomain2(domain)"
									class="suggestion-item">
									{{ emailPart }}@{{ domain }}
								</view>
							</view>
							
						</view>

					</view>
				</view>

				<view class="urtems">
					<view class="shud">
						设置密码
					</view>
					<view class="conste">
						<view class="xijsd">

							<view class="incenm">
								<input type="text" placeholder="填写密码" placeholder-class="co" />
							</view>
							<view class="">
								<image v-if="ispass" class="siecle" src="/static/dazi/ke.png" mode=""></image>
								<image v-else class="siecle" src="/static/dazi/nokan.png" mode=""></image>
							</view>

						</view>

					</view>
				</view>

				<view class="urtems">
					<view class="shud">
						确认密码
					</view>
					<view class="conste">
						<view class="xijsd">

							<view class="incenm">
								<input type="text" placeholder="再次填写密码" placeholder-class="co" />
							</view>
							<view class="">
								<image v-if="ispass2" class="siecle" src="/static/dazi/ke.png" mode=""></image>
								<image v-else class="siecle" src="/static/dazi/nokan.png" mode=""></image>
							</view>

						</view>

					</view>
				</view>





				<view class="urtems">
					<view class="shud">
						验证码
					</view>
					<view class="conste">
						<view class="xijsd">

							<view class="incenm">
								<input type="text" placeholder="请输入验证码" placeholder-class="co" />
							</view>
							<view class="send" @click="sencode">
								发送验证码
							</view>

						</view>

					</view>
				</view>

				<view class="urtems">
					<view class="shud">
						邀请码
					</view>
					<view class="conste">
						<view class="xijsd">

							<view class="incenm">
								<input type="text" placeholder="(选填)" placeholder-class="co" />
							</view>
							<view class="send">
								粘贴
							</view>

						</view>

					</view>
				</view>

				<view class="chebox">
					<view class="onpam">
						<view class="mans">
							<view class="leis " @click="changsezx(true)">
								<image class="selin"
									:src="  isman==true ? '/static/dazi/d0.png' :'/static/dazi/d1.png' " mode="">
								</image>
								<view class="mens " :class=" isman==true?'bgd':'' ">
									<image :src=" isman==true ? '/static/dazi/senan.png' : '/static/dazi/nona.png' "
										mode=""></image>
									<view class="tien" :class=" isman?'actit':'' ">
										我是男生
									</view>
								</view>
							</view>
							<view class="leis" @click="changsezx(false)">
								<image class="selin"
									:src="  isman==false ? '/static/dazi/d0.png' :'/static/dazi/d1.png' " mode="">
								</image>
								<view class="mens" :class=" isman==false?'bgd':'' ">
									<image :src=" isman==false ? '/static/dazi/senv.png' : '/static/dazi/ninv.png' "
										mode=""></image>
									<view class="tien " :class=" !isman?'actit':'' ">
										我是女生
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="busnd btnact">
					注册
				</view>
				<view class="seacus">
					<view class="isehd">
						<image @click="issele =!issele" v-if="issele" src="/static/dazi/okse.png" mode=""></image>
						<image @click="issele =!issele" v-else src="/static/dazi/nose.png" mode=""></image>
					</view>
					<view class="serins">
						<text>我已阅读并同意Xdidi</text>
						<text class="z1">《用户协议》</text>
						<text>和</text>
						<text class="z1">《隐私政策》</text>
					</view>



				</view>

			</view>
		</view>

		<up-overlay :show="show" @click="show = false"
			style="display: flex;align-items: center;justify-content: center;">
			<view class="pouper" @tap.stop>

				<view class="rosh">
					<image @click="show = false" src="/static/dazi/clos.png" mode=""></image>
				</view>
				<view class="shudcode">
					请输入下方图形验证码
				</view>

				<view class="iosld">
					<input type="text" placeholder="请输入验证码" placeholder-class="co" />
					<view class="ksbq">
						<image src="/static/image/chat_system.png" mode=""></image>
						<view class="tsye">
							看不清?换一张
						</view>
					</view>
				</view>
				<view class="busnd btnact ash">
					确认
				</view>
			</view>
		</up-overlay>

		<!-- 国家选择 -->


		<!-- <u-popup :show="show2" @close="close2" @open="open2" :round="30"> -->
		<up-overlay :show="show2" @click="show2 = false" style="display: flex;align-items: flex-end;justify-content: flex-end;width: 750rpx;">
			<view class="sleguo" @tap.stop>
				<view class="ropwen">
					<view class="lesi">
						选择国家/地区代码
					</view>
					<image class="ediuyt" @click="show2=false " src="/static/dazi/clos.png" mode=""></image>
				</view>
				<view class="serdh">
					<u--input placeholder="搜索" prefixIcon="search" v-model="query" @input="filterCountries"
						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</view>
				<view class="sercha">
					<scroll-view scroll-y="true" style="height: 800rpx;">
						<view class="comyst">
							<view class="ontet" v-for="(item,index) in filteredItems" :key="index"
								:class="doubelslel ==index?'doubelslel':'' " @click="changecurry(item)">
								<view class="klia">
									<image :src=" item.country_image " mode=""></image>
									<view class="nals">
										{{item.en}}
									</view>
								</view>
								<view class="ados">
									+{{item.mobile_code}}
								</view>
							</view>

						</view>
					</scroll-view>

				</view>
			</view>
			<!-- </u-popup> -->
		</up-overlay>




		<button class="demo-btn" @tap="showSuccess">成功提示</button>
		<button class="demo-btn" @tap="showError">错误示例</button>
		<button class="demo-btn" @tap="showInfo">普通信息</button>

		<alert ref="globalAlert"></alert>

		<wloading v-show="active"></wloading>


	</view>
</template>

<script>
	// import alert from '@/components/alert/alert.vue';
	// import wloading from '@/components/loading20.vue'
	export default {
		data() {
			return {
				filteredItems: [{
						country_image: '/static/dazi/china.png',
						en: '中文',
						mobile_code: 20
					},
					{
						country_image: '/static/dazi/china.png',
						en: '中文',
						mobile_code: 20
					},
					{
						country_image: '/static/dazi/china.png',
						en: '中文',
						mobile_code: 20
					},
					{
						country_image: '/static/dazi/china.png',
						en: '中文',
						mobile_code: 20
					},
					{
						country_image: '/static/dazi/china.png',
						en: '中文',
						mobile_code: 20
					}
				], // 存储过滤后的结果
				currylist: [], //国家选择
				doubelslel: 0, //选择的国家
				imgcurry: {}, //默认嗯国家选择
			// 测试邮箱
			email: '',
			showSuggestions: false,
			suggestions: [],
			emailDomains: [
				'qq.com',
				'gmail.com',
				'163.com',
				'yahoo.com',
				'hotmail.com',
				'outlook.com',
				// 更多...
			],
			debounceTimer: null,
			emailPart: '',


				isalert: false,
				show: false,
				show2: false,
				active: false, //加载动画
				account: '', //账号
				ishowacc: true, //当手机邮箱输出变成true
				ispass: false, //是否打来密码查看器
				ispass2: false, //再次填写密码是否打来密码查看器
				isman: true, //男女  true 男生  false 女生
				issele: false, //是否选择用户协议
				isAccountFouce: true, //手机邮箱是否聚焦

			}
		},
	mounted() {
			// 添加全局点击事件监听器
			document.addEventListener('click', this.handleClickOutside);
		},
		beforeDestroy() {
			// 移除全局点击事件监听器
			document.removeEventListener('click', this.handleClickOutside);
		},

		//聚焦输入框变颜色
		computed: {
			inputTelClass() {
				return {
					'blon-border': this.isAccountFouce,
					'black-border': !this.isAccountFouce
				};
			},

		},
	beforeDestroy() {
			document.removeEventListener('click', this.handleClickOutside);
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
	watch: {
	
	
	
		email(newell) {
			console.log('监听邮箱', newell)
			const atIndex = this.email.indexOf('@');
			console.log(atIndex)
			if (atIndex > 0) {
				this.isatinpu = false
				this.emailPart = this.email.substring(0, atIndex);
				this.showSuggestions = true;
			}
	
		},
		query(newQuery) {
			if (newQuery === '') {
				this.filteredItems = this.currylist; // 如果没有查询，则显示所有国家
			} else {
				this.filterCountries();
			}
		}
	},
		methods: {
			debouncedOnEmailInput() {
				clearTimeout(this.debounceTimer);
				this.debounceTimer = setTimeout(() => {
					this.onEmailInputguhao()
					this.onEmailInput({
						target: {
							value: this.email
						}
					});
				}, 300); // 300ms 的延迟
			},
			onEmailInputguhao() {
				const atIndex = this.email.indexOf('@');
				const iscom = this.email.indexOf('com');
				console.log('co有没有', iscom)
				console.log('atIndex', atIndex)
				if (iscom >= 0) return
				if (atIndex >= 0) {
					this.isatinpu = false
					this.emailPart = this.email.substring(0, atIndex);
					this.showSuggestions = true;
				} else {
					this.isatinpu = true
					this.showSuggestions = false;
				}
			},
			onEmailInput(event) {
				const value = event.target.value.trim(); // 去除首尾空格
				const parts = value.split('@');
				this.emailPart = parts[0]; // 获取邮箱前缀部分
			
				if (parts.length > 1) {
					const afterAt = parts[1];
					if (afterAt.length === 0) {
						// 如果@后面没有内容，显示所有建议
						this.suggestions = this.emailDomains;
					} else if (afterAt.length === 1) {
						// 如果@后面只有一个字符，检查这个字符是否存在于任何域名中
						this.suggestions = this.emailDomains.filter(domain =>
							domain.startsWith(afterAt.toLowerCase()) // 忽略大小写
						);
					} else {
						// 如果@后面有多于一个字符，清空建议
						this.suggestions = [];
					}
				} else if (this.emailPart !== '') {
					// 如果@前面有非空内容，显示所有建议
					this.suggestions = this.emailDomains;
				} else {
					// 输入为空时不显示建议
					this.suggestions = [];
				}
			
				this.showSuggestions = this.suggestions.length > 0;
			},
			
			handletelFocus(event) {
				console.log('聚焦')
				this.isTelFocused = true;
				this.onEmailInputguhao()
			},
			handletelBlur(event) {
				this.isTelFocused = false;
			},
			
			
			
			
			
			
			
			
			
			opencury(){
			this.show2 = true	
			},
			
			//选择的国家
			changecurry(item) {
				console.log(item)
				this.imgcurry = item
				this.show2 = false
				this.query = ''
			},


			gogin() {
				uni.navigateTo({
					url: '/pages/lug/loginreg/login'
				})
			},
			showSuccess() {
				this.$refs.globalAlert.show({
					type: 'success',
					title: '操作成功',
					content: '文件已上传至云端',
					duration: 2000
				})
			},
			showError() {
				this.$refs.globalAlert.show({
					type: 'error',
					title: '网络中断',
					content: '无法连接到服务器，请检查网络设置',
					duration: 4000
				})
			},
			showInfo() {
				this.$refs.globalAlert.show({
					type: 'info',
					title: '新消息提醒',
					content: '您有3条未读通知',
				})
			},
			sencode() {
				this.show = true
			},

			changsezx(i) {
				this.isman = i
			}

		},

	}
</script>

<style lang="scss">
	
	.seleacou {
		position: relative;
	}
	
	.suggestions {
		position: absolute;
		width: 100%;
		border: 1px solid #ccc;
		background-color: white;
		z-index: 10;
	}
	
	.suggestion-item {
		padding: 8px;
		cursor: pointer;
	}
	
	.suggestion-item:hover {
		background-color: #f0f0f0;
	}
	
	.imghu {
		width: 50rpx;
		height: 50rpx;
		vertical-align: middle;
		border-radius: 50rpx;
		margin-right: 20rpx;
	}

	.acys {
		color: #0FA088 !important;
	}

	.ontet {
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ados {
		color: rgba(131, 116, 135, 1);
		font-size: 24rpx;
	}

	.klia {
		display: flex;
		align-items: center;

		image {
			margin-right: 30rpx;
			width: 50rpx;
			height: 50rpx;
			vertical-align: middle;
			border-radius: 50rpx;
		}

		.nals {
			color: rgba(42, 34, 47, 1);
			font-size: 28rpx;
		}
	}

	.serdh {
		margin: 30rpx 0;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 30rpx;
		border: 1px solid #CFD6E3;
		display: flex;
		align-items: center;


	}

	.u-border {
		border-style: none !important;
	}

	.ropwen {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ediuyt {
		width: 48rpx;
		height: 48rpx;
		vertical-align: middle;
	}

	.lesi {
		color: rgba(0, 0, 0, 1);
		font-size: 32rpx;
		font-weight: bold;
	}

	.sleguo {
		padding: 30rpx;
		width: 750rpx;
		background-color: #fff;
		z-index: 9999999999;
		border-radius: 50rpx 50rpx 0 0;
	}


	.black-border {
		border: 1px solid #ede5ed;
	}

	.blon-border {
		border: 1px solid rgba(251, 117, 214, 1) !important;
		border-radius: 24rpx;
	}

	.u-transition {
		backdrop-filter: blur(3px);
		background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) -30%, rgba(255, 255, 255, 0) 50%);

	}

	::deep .bgpup {
		background-color: #2A222F !important;
	}

	.co {
		font-size: 28rpx;
		color: rgba(195, 176, 195, 1);
	}

	.iosld {
		margin: 50rpx 0;
		display: flex;
		// align-items: center;
		justify-content: space-between;

		input {
			margin-right: 20rpx;
			padding: 0 20rpx;
			height: 100rpx;
			border: 1px solid rgba(237, 229, 237, 1);
			border-radius: 30rpx;

		}

		.ksbq {
			display: flex;
			flex-direction: column;
			align-items: flex-end;

			image {
				border: 1px solid #ccc;
				width: 240rpx;
				height: 100rpx;
			}

			.tsye {
				margin: 20rpx 0;
				color: rgba(251, 117, 214, 1);
				font-size: 24rpx;
			}
		}

	}

	.shudcode {
		color: 32rpx;
		font-size: 32rpx;
		text-align: center;
		color: #2A222F;
	}

	.pouper {
		background-color: #fff;
		width: 600rpx;

		padding: 30rpx;
		border-radius: 30rpx;
	}

	.rosh {
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.isehd {
		height: 32rpx;
		display: flex;
		align-items: center;
		margin-right: 10rpx;
	}

	.seacus {
		display: flex;
		align-items: center;
	}

	.z1 {
		color: rgba(251, 117, 214, 1) !important;
	}

	.serins {
		text {
			color: rgba(131, 116, 135, 1);
			font-size: 24rpx;
		}
	}

	.isehd {
		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.btnact {
		background-color: #fb75d6 !important;
	}

	.ash {
		margin-top: 30rpx !important;
	}

	.busnd {
		margin: 100rpx 0 30rpx;
		background-color: rgba(255, 154, 233, 0.4);
		height: 110rpx;
		text-align: center;
		line-height: 110rpx;
		border-radius: 100rpx;
		color: #fff;
		font-size: 32rpx;
	}

	.bgd {
		background: rgba(88, 168, 255, 0.1);
		border: 1px solid rgba(88, 168, 255, 1) !important;

	}

	.actit {
		color: rgba(88, 168, 255, 1) !important;
		font-weight: 600;
	}

	.mans {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.leis {
		display: flex;
		align-items: center;

		.selin {
			width: 32rpx;
			height: 32rpx;
			vertical-align: middle;
		}

		.mens {
			margin-left: 20rpx;
			border: 1px solid rgba(237, 229, 237, 1);
			width: 240rpx;
			height: 170rpx;
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 48rpx;
				height: 48rpx;
				vertical-align: middle;
			}
		}

		.tien {
			margin-top: 20rpx;
			color: rgba(131, 116, 135, 1);
			font-size: 28rpx;
		}
	}

	.send {
		color: rgba(251, 117, 214, 1);
		font-size: 28rpx;
	}

	.incenm {
		width: 60%;
		// background-color: #ccc;
	}

	.botm {
		width: 20rpx;
		height: 16rpx;
		vertical-align: middle;
	}

	.sechs {
		display: flex;
		align-items: center;



		.senum {
			padding: 0 6rpx;
			color: rgba(42, 34, 47, 1);
			font-size: 28rpx;
		}

		.cury {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.xijsd {
		border: 1px solid rgba(237, 229, 237, 1);
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
		padding: 0 30rpx;
		border-radius: 24rpx;
	}

	.conste {
		margin: 30rpx 0;
	}

	.co {
		color: rgba(195, 176, 195, 1);
		font-size: 28rpx;
	}

	.siecle {
		width: 44rpx;
		height: 44rpx;
	}

	.urtems {
		.shud {
			color: rgba(42, 34, 47, 1);
			font-size: 28rpx;
		}

		.incenm {}
	}

	.rohead {
		z-index: 999;
		padding: 30rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.logins {
			color: rgba(251, 117, 214, 1);
			font-size: 32rpx;
		}

		.creta {
			color: rgba(42, 34, 47, 1);
			font-size: 48rpx;
		}
	}

	page {
		padding: 30rpx;
	}
</style>